<template>
  <div class="map-picker">
    <em-cell
      :title="title"
      center
      is-link
      :value-class="['em-ellipsis','map-picker__value',linkTitle && 'map-picker__is-linked']"
      @click="showDialog = true"
    >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item,index) in breadcrumbs"
          :key="index"
        >{{ item }}</el-breadcrumb-item>
      </el-breadcrumb>
    </em-cell>
    <el-dialog
      v-if="showDialog"
      title="选择数据源"
      :visible.sync="showDialog"
      width="500"
      destroy-on-close
      append-to-body
      custom-class="middle-dialog"
      lock-scroll
    >
      <source-fence
        v-model="checkedLink"
        :source-menu="sourceMenu"
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="onClearLink">清 除</el-button>
        <el-button
          type="primary"
          @click="onCheckedLink"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SourceFence from '@/components/SourceFence'
import Menus from '@/components/SourceFence/mock/menus'
export default {
  name: 'SourceCell',
  components: {
    SourceFence
  },
  props: {
    value: {
      type: Object,
      default: null
    },
    sourceFrom: {
      type: Array,
      default: () => {
        return []
      }
    },
    usage: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '链接地址'
    }
  },
  provide() {
    return {
      usage: () => this.usage
    }
  },
  data() {
    return {
      navMenus: Menus,
      checkedLink: null,
      showDialog: false,
      saving: false,
      activeIndex: undefined
    }
  },
  computed: {
    link: {
      get() {
        return this.value
      },
      set(v) {
        this.value = v
      }
    },
    sourceMenu() {
      const sourceFrom = this.sourceFrom
      if (sourceFrom.length > 0) {
        return this.navMenus.filter(item => {
          return sourceFrom.indexOf(item.source) !== -1
        })
      } else {
        return this.navMenus
      }
    },
    filterParam() {
      if (this.usage) {
        return { usage: this.usage }
      }
      return null
    },
    linkTitle() {
      if (this.link) {
        if (this.link.title) {
          return this.link.title
        }
        return this.link.map_data && this.link.map_data.title
      }
      return ''
    },
    currentFence() {
      const fenceId = this.link && this.link.fence_id
      if (fenceId) {
        return this.navMenus.find(item => {
          return item.id === fenceId
        })
      }
      return null
    },
    breadcrumbs() {
      var data = []
      if (this.linkTitle) {
        if (this.currentFence && this.currentFence.breadcrumb) {
          data.push(this.currentFence.breadcrumb)
        }
        data.push(this.linkTitle)
      } else {
        data.push('选取数据源')
      }
      return data
    }
  },
  watch: {
    link(v) {
      this.checkedLink = { ...v }
    }
  },
  created() {
    this.checkedLink = { ...this.link }
  },
  methods: {
    onCheckedLink() {
      if (this.checkedLink) {
        this.onEmitInput(this.checkedLink)
      } else {
        this.showDialog = false
      }
    },
    onClearLink() {
      this.onEmitInput({
        map_id: 0,
        fence_id: 1,
        map_data: null
      })
    },
    onEmitInput(data) {
      this.$emit('input', data)
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss">
.picker-button {
  cursor: pointer;
}
.middle-dialog {
  height: 70vh;
  display: flex;
  flex-direction: column;
  .el-dialog__footer,
  .el-dialog__header {
    padding: 20px;
  }
  .el-dialog__body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
}
.map-picker__is-linked {
  color: #ff6600;
  font-size: 12px;
}
.el-breadcrumb {
  font-size: 12px;
  &__separator {
    margin: 0 4px;
  }
}
</style>
